{% extends "blogs/admin/base_blog.html" %}

{% block current_action %}Upload Image{% endblock %}

{% block content %}
<style>
.module h2 {
    padding: 0;
    padding-top: 3px;
}
ul#nav {
    padding: 0;
    margin: 0;
}
ul#nav li {
    list-style-type: none;
    float: left;
    display: block;
    margin: 0 0.5em;
    padding: 3px 2px;
}
ul#nav li a {
    color: white;
}
ul#nav li.active {
    background-color: white;
}
ul#nav li.active a {
    color: #003366;
}
#image-browse {
    padding: 5px;
}
ul#images {
    padding: 0;
    margin: 0;
}
ul#images li {
    list-style-type: none;
    float: left;
    padding-right: 5px;
}
div.ui-dialog-container {
    background-color: white;
}
div.ui-dialog-titlebar a span {
    background: #B0C9E3 none repeat scroll 0 0;
    border:1px solid black;
    color: #FFFFFF;
    display: block;
    float: right;
    font-weight: bold;
    height:15px;
    padding-left: 5px;
    padding-top: 2px;
    width: 15px;
}
label {
    padding-right: 5px;
    vertical-align: bottom;
}
</style>
<form enctype="multipart/form-data" action="" method="post">
    <fieldset class="module ">
        <h2>
            <ul id="nav">
                <li{% ifequal curr_tab "upload" %} class="active"{% endifequal %}>
                    <a href="{% url blogs.admin.upload_image blog_slug %}?tab=upload">Upload Image</a>
                </li>
                <li{% ifequal curr_tab "browse" %} class="active"{% endifequal %}>
                    <a href="{% url blogs.admin.upload_image blog_slug %}?tab=browse">Browse Images</a>
                </li>
            </ul>
            <br style="clear: both"/>
        </h2>
    {% ifequal curr_tab "upload" %}
                    <table>
                        {% for field in form %}
                            <tr>
                                <td>{{ field.label_tag }}: {% if field.field.required %}*{% endif %}</td>
                                <td>{{ field }}
                                    {% if field.help_text %}{{ field.help_text }}{% endif %}
                                    {% if field.errors %}<p class="myerrors">{{ field.errors }}</p>{% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
            </fieldset>
            <div class="submit-row">
                <input type="submit" value="Upload" class="default"/>
            </div>
    {% endifequal %}
    {% ifequal curr_tab "browse" %}
        <div style="display: none" id="insert">
            <p><a href="#" onclick="return browse_images();">&laquo; Browse images</a></p>
            <p style="float:left"><img id="insert-image" src="" alt=""/></p>
            <table>
                <tr>
                    <td>Title:</td>
                    <td><input type="text" name="title" id="sendto-title"/></td>
                </tr>
                <tr>
                    <td>Alt:</td>
                    <td><input type="text" name="alt" id="sendto-alt"/></td>
                </tr>
                <tr>
                    <td>Size:</td>
                    <td>
                        <input type="radio" name="size" checked="checked" id="insert-size-thumbnail"/>
                        <label for="insert-size-thumbnail">Thumbnail</label>
                        <input type="radio" name="size" id="insert-size-original"/>
                        <label for="insert-size-original">Original size</label>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="button" value="Send to editor &raquo;" onclick="send_to_editor()"/></td>
                </tr>
            </table>
        </div>
        <div id="image-browse">
            {% load humanize %}
            {% load thumbnail %}
            {% if images %}
                <span>Click on an image to send it to the editor.</span>
                <ul id="images">
                    {% for image in images %}
                        <li>
                            <a rel="image-{{ image.id }}" href="#" onclick="return insert_image(this)">
                                <img id="image-{{ image.id }}" src="{{ MEDIA_URL }}uploads/{{ image.get_file_filename|thumbnail:"200b,blogs" }}" alt="{{ image.get_file_url }}" title="{{ image.title }}"/>
                            </a><br/>
                            {{ image.get_file_size|intcomma }} bytes
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>No images have been upload yet. <a href="{% url blogs.admin.upload_image blog_slug %}?tab=upload">Upload</a> one now.</p>
            {% endif %}
        </div>
        <script>
        function insert_image(a) {
            var id = $(a).attr("rel");
            $("#insert").show();
            $("#insert #sendto-title").attr("value", ($("#"+id).attr("title")));
            $("#insert #sendto-alt").attr("value", ($("#"+id).attr("title")));
            $("#insert #insert-image").attr("src", $("#"+id).attr("src"));
            $("#insert #insert-image").attr("alt", $("#"+id).attr("alt"));
            $("#image-browse").hide();
            return false;
        }
        
        function browse_images() {
            $("#insert").hide();
            $("#image-browse").show();
            return false;
        }
        
        function send_to_editor() {
            var title = $("#insert #sendto-title").attr("value");
            var alt = $("#insert #sendto-alt").attr("value");
            
            if ($("#insert-size-original").attr("checked")) {
                var src = $("#insert #insert-image").attr("alt");
            } else {
                var src = $("#insert #insert-image").attr("src");
            }
            
            window.parent.tinyMCE.activeEditor.execCommand('mceInsertRawHTML',false,
                '<img src="'+src+'" title="'+title+'" alt="'+alt+'"/>');
        }
        </script>
    {% endifequal %}
</form>
{% endblock %}